<!DOCTYPE html>
<html lang="zh">

<head>
	<link rel="icon" href="https://qzonestyle.gtimg.cn/aoi/img/logo/favicon.ico">
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>QQ空间备份-<%:=blog.custom_title%></title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/css/lightgallery.css" integrity="sha256-u/8xxXqgHmqInTUqModtj8UvjfzppMhunF8mGI5gpAM=" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/css/lightgallery-bundle.min.css" integrity="sha256-S8sL5U5HwTa3JmR1y0ASCyQH111hgvPpKOkYXZHa4sA=" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="../Common/css/common.css">
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

	<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/lightgallery.min.js" integrity="sha256-dkTk5cgrLUjjQiGNZsoDnjhCI+UuhTffLnyrN7qLutw=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/plugins/zoom/lg-zoom.min.js" integrity="sha256-6Ny31P8WSBcY1SFaWxg4zgDzZJNNIJ4BchV+RxFiDR0=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/plugins/video/lg-video.min.js" integrity="sha256-lkYYtHLEk1Rnr3TOXc/l1tfObPXEzvgKwePG49fZ1Rw=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/plugins/thumbnail/lg-thumbnail.min.js" integrity="sha256-X+UxSQGUfsYDhXAsKkzoI2g7Jjn7wWK/vzRfcmYNop4=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/plugins/rotate/lg-rotate.min.js" integrity="sha256-G1VF4wLKwDc+R5n/GbOkQFhdhGEKXve+GUlrdyRKXaE=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/plugins/fullscreen/lg-fullscreen.min.js" integrity="sha256-7SXgJ9rT6uPHY7fse2NsZN7Yq96f+9I35bDtUwX8ZHc=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/plugins/comment/lg-comment.min.js" integrity="sha256-RszgszIiPRvEWMviw43SzoZwsvKZNbz2Djio7kUemrY=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.3.0/plugins/autoplay/lg-autoplay.min.js" integrity="sha256-XGqZJI2/fqI+ph7+msYWRIi9NLzsZ2PlhrhltWEUmOM=" crossorigin="anonymous"></script>
</head>

<body>
	<header>
		<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
			<a class="navbar-brand" target="_blank" href="https://github.com/ShunCai/QZoneExport">QQ空间导出助手</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb bg-dark">
						<li class="breadcrumb-item"><a href="../index.html">个人中心</a></li>
						<li class="breadcrumb-item"><a href="index.html">私密日记</a></li>
						<li class="breadcrumb-item active" aria-current="page">日记详情</li>
					</ol>
				</nav>
			</div>
		</nav>
	</header>
	<main role="main">
		<div class="container py-5 mt-3" style="max-width: 920px;">
			<div id="blog_info" class="text-center">
				<h2 id="blog_title" class="text-warning"><%:=blog.custom_title%></h2>
				<div>
					<span id="blog_time" class="text-muted"><%:=API.Utils.formatDate(blog.pubtime)%></span>
				</div>
			</div>
			<article id="blog_content" class="mt-3">
				<%:=API.Utils.base64ToUtf8(blog.custom_html)%>
			</article>
			<div id="comments_html">
				<h5 class="mt-3">评论
					<span class="badge badge-primary badge-pill"><%:=blog.comments.length%></span>
					<span class="text-primary p-1 float-right fa fa-thumbs-up mr-2 cursor" title="查看点赞" data-field="blogid" data-target="<%:=blog.blogid%>"><%:=blog.likeTotal || 0 %></span>
					<span class="text-primary p-1 float-right fa fa-eye mr-2 cursor" title="最近访问" data-field="blogid" data-target="<%:=blog.blogid%>"><%:=blog.custom_visitor && blog.custom_visitor.viewCount || 0 %></span>
				</h5>
				<%/* 评论 */%>
				<%/* 遍历评论 */%>
				<%for (let index = 0; index < blog.comments.length; index++) {%>
					<%const comment = blog.comments[index];%>
					<div class="p-1 border-top comments mt-3">
						<div class="container comment  m-1 p-0">
							<a class="me-a avatar p-0 m-0" target="_blank" href="<%:=API.Common.getUserUrl(comment.poster.id)%>">
								<img class="lazyload loading w-100 h-100 border rounded-circle" src="<%:=API.Common.getUserLogoUrl(comment.poster.id)%>">
							</a>
							<div class="ml-4">
								<%/* 评论 */%>
								<div class="container ml-4">
									<a class="author">
										<a target="_blank" href="<%:=API.Common.getUserUrl(comment.poster.id)%>">
											<span><%:=API.Common.formatContent(comment.poster.name)%></span>
										</a>
										<span class="text-muted small"><%:=API.Utils.formatDate(comment.postTime)%></span>
										<span class="border-warning border rounded text-warning small p-1">#<%:=index + 1 %></span>
									</a>
								</div>
								<div class="messageText ml-4 container m-3">
									<%:=API.Common.formatContent(comment.content)%>
								</div>
								<%/* 评论回复 */%>
								<%if(comment.replyNum > 0 && comment.replies){%>
									<%for(let reply of comment.replies){%>
										<div class="comments m-1">
											<div class="container border-top comment p-1">
												<a class="me-a avatar p-0 m-0 " target="_blank" href="<%:=API.Common.getUserUrl(reply.poster.id)%>">
													<img class="lazyload loading w-100 h-100 border rounded-circle" src="<%:=API.Common.getUserLogoUrl(reply.poster.id)%>">
												</a>
												<div class=" ml-4  ">
													<div class="container ml-4">
														<a class="author">
															<a target="_blank" href="<%:=API.Common.getUserUrl(reply.poster.id)%>">
																<span class="text-info"><%:=API.Common.formatContent(reply.poster.name)%></span>
															</a>
															<span class="text-muted small"><%:=API.Utils.formatDate(reply.postTime)%></span>
														</a>
													</div>
													<div class="messageText ml-4 container m-1"><%:=API.Common.formatContent(reply.content)%></div>
												</div>
											</div>
										</div>
									<%}%>
								<%}%>
							</div>
						</div>
					</div>
				<%}%>
			</div>
		</div>
	</main>
	<script>
		$(function() {
			// 日志中的图片
			$('#blog_content .QZBLOG_IMG_LOADING').on('click', function() {
				// 画廊相册DOM
				const $galleryDom = $('#blog_content').get(0);
				// 点击的图片的索引位置
				const imgIdx = $(this).attr('data-idx');

				if ($galleryDom.galleryIns) {
					$galleryDom.galleryIns.openGallery(imgIdx * 1);
					return;
				}

				// 实例化画廊相册
				const galleryIns = lightGallery($galleryDom, {
					plugins: [
						lgZoom,
						lgFullscreen,
						lgThumbnail,
						lgRotate
					],
					mode: 'lg-fade',
					selector: '.lightgallery',
					download: false,
					thumbnail: true,
					loop: false
				});
				$galleryDom.galleryIns = galleryIns;

				// 打开画廊
				galleryIns.openGallery(imgIdx * 1);
			})
		});
	</script>
</body>

</html>